<template>
	<view class="zh-u-tabs " :class="{'fixed-top':props.position == 'fixedTop'}">
		<view class="zh-tabs display-flex align-center justify-around" :style="tabsWidth">
			<view class="zh-tabs-item" v-for="(item, index) in props.titles" :key="index" @click="click(index)">
				<view class="display-flex align-center" :class="{'active':index === active}">
					<text>{{ item }}</text>
					<view class="ml-5">
						<u-mark v-if="props.markValue && props.markValue[index] > 0" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="markValue[index]"></u-mark>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, watch } from 'vue'
	const active = ref(0)
	const props = withDefaults(defineProps<{
		titles?:Array<string>
		position?:string
		width?:string
		active?:number
		markValue?:Array<number>
	}>(),{
		width:'750',
		active:0
	})
	
	const tabsWidth = reactive({
		width:uni.upx2px(Number(props.width)) + 'px'
	})
	
	watch(() => props.active, () => active.value = props.active)
	const emit = defineEmits(['click'])
	
	const click = (index:number) => {
		active.value = index
		emit('click', index)
	}
</script>

<style lang="scss" scoped>
	.zh-u-tabs {
		background-color:$uni-bg-card-color;
		padding:15rpx 0rpx 5rpx;
		z-index:2;
		text-align:center;
		&.fixed-top {
			position:fixed;
			top:0;
			left:0;
			right:0;
		}
		.zh-tabs {
			margin:0 auto;
			&-item {
				font-size: 30rpx;
				box-sizing: border-box;
				padding:30rpx 0;
				.active {
					padding:11rpx 0;
					font-family: bold;
					border-bottom:10rpx solid #1769FF;
					text-align:center;
					border-radius: 5rpx;
					
				}
			}
		}
		
	}
</style>